<template>
	<view>
		<!-- 手机号 -->
		<view class="input">
			<input type="number" maxlength="11" placeholder="请输入手机号" :value="phone" @input="getPho" />
		</view>
		<!-- 密码 -->
		<view class="input">
			<input type="text" maxlength="15" placeholder="请输入新密码" :value="password" @input="getPass"
				:password="visiable" />
			<image class="eye" :src="visiable?'../../static/login_imgs/open.png':'../../static/login_imgs/close.png' "
				@click="eye"></image>
		</view>
		<!-- 确认密码 -->
		<view class="input">
			<input type="text" maxlength="15" placeholder="请输入新密码" :value="password2" @input="getPass2"
				:password="visiable" />
			<image class="eye" :src="visiable?'../../static/login_imgs/open.png':'../../static/login_imgs/close.png' "
				@click="eye"></image>
		</view>
		<!-- 验证码 -->
		<view style="display: flex;">
			<view class="input2">
				<input type="number" maxlength="6" placeholder="请输入验证码" :value="cheaking" @input="getCheck" />
			</view>
			<view class="check">获取验证码</view>
		</view>
		<!-- 提示 -->
		<view class="tip">完成后需要重新登录</view>
		<!-- 按钮 -->
		<view class="button" @click="regiest">确定</view>
	</view>
</template>

<script>
	var userAccount = getApp().globalData.userAccount
	var myAccount = getApp().globalData.myAccount
	export default {
		data() {
			return {
				phone: null,
				visiable: true,
				visiable2: true,
				password: null,
				password2: null,
				cheaking: null,
			}
		},
		methods: {
			onLoad(options) {
			
			},
			eye() {
				this.visiable = !this.visiable
			},
			getPho(e) {
				this.phone = e.detail.value
			},
			getPass(e) {
				this.password = e.detail.value
			},
			getPass2(e) {
				this.password2 = e.detail.value
			},
			getCheck(e) {
				this.cheaking = e.detail.value
			},
			eye() {
				this.visiable = !this.visiable
			},
			regiest() {
				const password = this.password
				const phone = this.phone
				if (phone == null) {
					wx.showToast({
						title: '请输入电话号',
						icon: 'error'
					})
				} else if (myAccount.phone != phone) {
					wx.showToast({
						title: '号码错误',
						icon: 'error'
					})
				} else if (password == null) {
					wx.showToast({
						title: '请输入密码',
						icon: 'error'
					})
				} else if (this.password2 == null) {
					wx.showToast({
						title: '请确认密码',
						icon: 'error'
					})
				} else if (password != this.password2) {
					wx.showToast({
						title: '两次密码不一致',
						icon: 'error'
					})
				} else {
					myAccount.password=password
					userAccount.forEach(item => item.account == myAccount.account ? myAccount.phone = phone : '')
					wx.showToast({
						title: '修改成功',
						icon: 'success',
						duration: 1300
					})
					setTimeout(function() {
						wx.reLaunch({
							url: '../../pages/login/login',
						})
					}, 1300)
				}
			}
		}
	}
</script>

<style>
	.input {
		width: 90vw;
		margin: 3vw auto;
		padding: 1vw 3vw;
		border: solid 1px #00000030;
		border-radius: 3px;
		font-size: 4vw;
		display: flex;
	}

	.eye {
		display: flex;
		width: 7vw;
		height: 7vw;
		margin-left: 40vw;
	}

	.input2 {
		width: 66vw;
		margin: 0vw auto 3vw;
		padding: 1vw 3vw;
		border: solid 1px #00000030;
		border-radius: 3px;
		font-size: 4vw;
		display: flex;
	}

	.check {
		text-align: center;
		width: 22vw;
		margin: 0vw auto 3vw;
		line-height: 8vw;
		border: solid 1px #00000030;
		border-radius: 3px;
		font-size: 4vw;
		background-color: #bcbeff;
		color: #ffffff;
	}

	.tip {
		margin-left: 2vw;
		font-size: 3vw;
		font-weight: 800;
		color: #fbacb0;
	}

	.button {
		margin: 10vh auto;
		width: 80vw;
		height: 7vh;
		line-height: 7vh;
		text-align: center;
		color: #ffffff;
		border-radius: 5px;
		font-weight: 550;
		background-color: #ae8fdc;
	}
</style>
